<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cm_westwood">
    
    <title>
        
            第8周 |
        
        西木同学的代码训练 2022
    </title>
    
<link rel="stylesheet" href="/code_training_2022/css/style.css">

    <link rel="shortcut icon" href="">
    
<link rel="stylesheet" href="/code_training_2022/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"cm_westwood.gitee.io","root":"/code_training_2022/","language":"en","path":"search.json"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"","favicon":"","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"https://xpoet.cn/images/bg.svg","description":"Keep writing and Keep loving."},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":true}}},"local_search":{"enable":true,"preload":false},"code_copy":{"enable":true,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":true},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 6.2.0"></head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                西木同学的代码训练 2022
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/code_training_2022/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/code_training_2022/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/code_training_2022/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/code_training_2022/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/code_training_2022/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/code_training_2022/tags">TAGS</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">第8周</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cm_westwood</span>
                        
                            <span class="author-label">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2022-11-26 20:54:29</span>
        <span class="mobile">2022-11-26 20:54</span>
    </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/code_training_2022/tags/Jupyter-Notebook/">Jupyter Notebook</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <blockquote>
<p>今天来继续写博客吧，一周三更很快就能补上原来的进度了</p>
<p>这周来讲一下 Jupyter notebook 里面的好用的前端工具吧</p>
</blockquote>
<p>Jupyter notebook - 拥抱网络标准；Jupyter notebook - 通讯；Jupyter notebook - 自带的一些事件；Jupyter notebook - 表格工具；Jupyter notebook - echarts；Jupyter notebook - jQuery UI；Jupyter notebook - Vue</p>
<span id="more"></span>

<p><a href="/code_training_2022/第8周/配套代码.html" style="text-align: center; display: block;">第8周的配套代码</a></p>
<h1 id="Jupyter-notebook-拥抱网络标准"><a href="#Jupyter-notebook-拥抱网络标准" class="headerlink" title="Jupyter notebook - 拥抱网络标准"></a>Jupyter notebook - 拥抱网络标准</h1><p>首先要搞懂在 notebook 里面书写用户前端的理念，在我深读过官方的文档之后，发现了这么一段话：</p>
<blockquote>
<p>我们开发当前笔记本电脑web应用程序的主要原因之一就是要拥抱web技术。  </p>
<p> 作为一个使用HTML、JavaScript和CSS的纯web应用程序，Notebook可以免费获得所有web技术的改进。 因此，随着浏览器对不同媒体的支持扩展，笔记本web应用程序应该能够兼容而无需修改。  </p>
<p> 随着JavaScript VM速度的提高，用户界面的性能也是如此。  </p>
<p> 只使用web技术的另一个优点是，接口的代码可以被最终用户完全访问，并且可以实时修改。 即使这个任务并不总是容易的，我们也会努力保持我们的代码尽可能的可访问和可重用。 这将允许我们——用最少的努力——开发定制web界面行为的小扩展。 </p>
<p><a class="link"   target="_blank" rel="noopener" href="https://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/JavaScript%20Notebook%20Extensions.html#custom.js" >拥抱网络标准 — Jupyter Notebook 6.4.12 文档<i class="fas fa-external-link-alt"></i></a></p>
</blockquote>
<p>正如原文所说，Jupyter notebook 已经和我们介绍了在 notebook 中开发前端的理念就是借助现有的前端技术和 Python 内核进行通信，完成一个全栈的开发过程。</p>
<h1 id="Jupyter-notebook-通讯"><a href="#Jupyter-notebook-通讯" class="headerlink" title="Jupyter notebook - 通讯"></a>Jupyter notebook - 通讯</h1><p>首先让我们来重温一下 Jupyter notebook 里面的前后端通信的方法，为什么说是重温，是因为这个<a href="https://cm_westwood.gitee.io/summer_training_2021/2022/01/15/%E7%AC%AC11%E5%91%A8/">在我的夏季训练2021的第11周里面有总结过</a>，以现在的眼光来看我当时写的实在是理解不透彻，因为当时里面使用的方法还是一些 bing 搜索出来别人在 stackoverflow 上使用奇技淫巧的解决方案，现在我深入了解官方文档之后有了更深的认识了。</p>
<p>notebook 里面使用的通信方式是他自己通过 ZQM 封装的一个通信协议，是全双工的通信方式，自带的消息格式转换比 socket 通信还好使，谁叫他们都在一个服务器上完成的呢！</p>
<blockquote>
<p><a class="link"   target="_blank" rel="noopener" href="https://jupyter-notebook.readthedocs.io/en/stable/comms.html" >通讯 — Jupyter Notebook 6.4.7 文档<i class="fas fa-external-link-alt"></i></a></p>
</blockquote>
<h1 id="Jupyter-notebook-自带的一些事件"><a href="#Jupyter-notebook-自带的一些事件" class="headerlink" title="Jupyter notebook - 自带的一些事件"></a>Jupyter notebook - 自带的一些事件</h1><p>如果你阅读过 notebook 的源码，就会发现一些有用的事件，在我的例子中，前端通过调用一个原生的事件传递前端的参数给 python 的 input 输入，以此来封装一个用户输入的前端，本周的配套代码给出了一个例子。</p>
<h1 id="Jupyter-notebook-表格工具"><a href="#Jupyter-notebook-表格工具" class="headerlink" title="Jupyter notebook - 表格工具"></a>Jupyter notebook - 表格工具</h1><p>这个我原来很早之前就写过一期啊！<a href="https://cm_westwood.gitee.io/summer_training_2021/2022/01/03/%E7%AC%AC9%E5%91%A8/">在我的夏季训练2021的第九周里面有总结过</a>，现在这么久过去了，我总结下来还是 <a class="link"   target="_blank" rel="noopener" href="https://datatables.net/examples/basic_init/zero_configuration.html" >DataTables<i class="fas fa-external-link-alt"></i></a> 最好用，是最能够和 pands 在前端的输出结合在一起使用的，这里再补充我使用过程中收集的几个很有用的官方例子，可以用于和前端其他元素一起联动筛选表格里面的数据。</p>
<blockquote>
<p><a class="link"   target="_blank" rel="noopener" href="https://datatables.net/extensions/select/examples/api/select" >DataTables example - Select items<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://datatables.net/examples/api/select_row.html" >DataTables example - Row selection (multiple rows)<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://datatables.net/blog/2014-08-26#Complete-code" >Alphabet input search - Part I<i class="fas fa-external-link-alt"></i></a></p>
</blockquote>
<h1 id="Jupyter-notebook-echarts"><a href="#Jupyter-notebook-echarts" class="headerlink" title="Jupyter notebook - echarts"></a>Jupyter notebook - echarts</h1><p>Jupyter notebook python 内核使用的是 IPython，而 RequireJS 是 IPYNB 管理 JS 模块的基础库，借助 requirejs，我们就可以快速的在 jupyter 中动态加载所需的前端工具包，结合上面提到的前后端通信的功能，就可以在 notebook 上绘制精美的图表了。</p>
<blockquote>
<p><a class="link"   target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/61357518" >如何优雅地在 IPython Notebook 中使用 ECharts<i class="fas fa-external-link-alt"></i></a></p>
</blockquote>
<h1 id="Jupyter-notebook-jQuery-UI"><a href="#Jupyter-notebook-jQuery-UI" class="headerlink" title="Jupyter notebook - jQuery UI"></a>Jupyter notebook - jQuery UI</h1><p>如果你阅读过 Jupyter notebook 的源码，你就可以发现 jQuery UI 原来是 notebook 里默认引用的前端插件，那么我们就可以毫不费力的去使用这里面自带的一些小部件了。</p>
<blockquote>
<p><strong><a class="link"   target="_blank" rel="noopener" href="https://www.runoob.com/jqueryui/jqueryui-intro.html" >现在开始学习 jQuery UI！<i class="fas fa-external-link-alt"></i></a></strong></p>
</blockquote>
<h1 id="Jupyter-notebook-Vue"><a href="#Jupyter-notebook-Vue" class="headerlink" title="Jupyter notebook - Vue"></a>Jupyter notebook - Vue</h1><p>有了 requirejs 管理 javascript 的库，那么使用 Vue 构建一个单页应用也不是不可能了，Vue 的优势就是能够很好的绑定前端传递的消息数据格式，可以见<a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/examples/#form-bindings" >表单绑定<i class="fas fa-external-link-alt"></i></a>，结合 notebook 里面提供的通信，写起小应用来简直不要太舒服。</p>
<blockquote>
<p><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/" >https://cn.vuejs.org/<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://router.vuejs.org/zh/" >https://router.vuejs.org/zh/<i class="fas fa-external-link-alt"></i></a></p>
</blockquote>
<p>这里要注意的是，jQuery UI 的部件库是不能很好的和 Vue 一起使用的，比如 <a class="link"   target="_blank" rel="noopener" href="https://www.runoob.com/jqueryui/example-sortable.html" >jQuery UI 实例 - 排序（Sortable）<i class="fas fa-external-link-alt"></i></a> 里面的实例是不能和 Vue 一起用的，Vue 想实现这种功能得借助 <a class="link"   target="_blank" rel="noopener" href="https://github.com/SortableJS/Vue.Draggable" >SortableJS&#x2F;Vue.Draggable：基于 Sortable.js 的 Vue 拖放组件<i class="fas fa-external-link-alt"></i></a> </p>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/code_training_2022/tags/Jupyter-Notebook/">#Jupyter Notebook</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/code_training_2022/2022/12/03/%E7%AC%AC9%E5%91%A8/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">第9周</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/code_training_2022/2022/11/25/%E7%AC%AC7%E5%91%A8/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">第7周</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2022</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cm_westwood</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Jupyter-notebook-%E6%8B%A5%E6%8A%B1%E7%BD%91%E7%BB%9C%E6%A0%87%E5%87%86"><span class="nav-number">1.</span> <span class="nav-text">Jupyter notebook - 拥抱网络标准</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Jupyter-notebook-%E9%80%9A%E8%AE%AF"><span class="nav-number">2.</span> <span class="nav-text">Jupyter notebook - 通讯</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Jupyter-notebook-%E8%87%AA%E5%B8%A6%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B%E4%BB%B6"><span class="nav-number">3.</span> <span class="nav-text">Jupyter notebook - 自带的一些事件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Jupyter-notebook-%E8%A1%A8%E6%A0%BC%E5%B7%A5%E5%85%B7"><span class="nav-number">4.</span> <span class="nav-text">Jupyter notebook - 表格工具</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Jupyter-notebook-echarts"><span class="nav-number">5.</span> <span class="nav-text">Jupyter notebook - echarts</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Jupyter-notebook-jQuery-UI"><span class="nav-number">6.</span> <span class="nav-text">Jupyter notebook - jQuery UI</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Jupyter-notebook-Vue"><span class="nav-number">7.</span> <span class="nav-text">Jupyter notebook - Vue</span></a></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="Search..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>




<script src="/code_training_2022/js/utils.js"></script>

<script src="/code_training_2022/js/main.js"></script>

<script src="/code_training_2022/js/header-shrink.js"></script>

<script src="/code_training_2022/js/back2top.js"></script>

<script src="/code_training_2022/js/dark-light-toggle.js"></script>



    
<script src="/code_training_2022/js/local-search.js"></script>




    
<script src="/code_training_2022/js/code-copy.js"></script>




    
<script src="/code_training_2022/js/lazyload.js"></script>



<div class="post-scripts">
    
        
<script src="/code_training_2022/js/left-side-toggle.js"></script>

<script src="/code_training_2022/js/libs/anime.min.js"></script>

<script src="/code_training_2022/js/toc.js"></script>

    
</div>



</body>
</html>
